<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>UPTP Gateway 控制台</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-4">
        <!-- 页面标题 -->
        <div class="row mb-3">
            <div class="col-12 d-flex justify-content-between align-items-center">
                <h1 class="display-6">UPTP 网关管理控制台</h1>
                <div class="d-flex gap-2">
                    <button class="btn btn-success btn-lg" onclick="downloadAndroidClient()">
                        <i class="bi bi-android2 me-2"></i>Android客户端下载
                    </button>
                    <button class="btn btn-danger btn-lg" onclick="logout()">
                        <i class="bi bi-box-arrow-right me-2"></i>退出登录
                    </button>
                </div>
            </div>
            <div class="col-12">
                <hr class="my-2">
            </div>
        </div>

        <!-- 网关信息 -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">网关信息</h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <label class="form-label text-muted small mb-1">网关名称</label>
                            <div class="d-flex align-items-center gap-2">
                                <div class="fw-bold" id="gatewayName">未设置</div>
                                <button class="btn btn-sm btn-outline-primary" onclick="showGatewayNameModal()">
                                    <i class="bi bi-pencil"></i>
                                </button>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label text-muted small mb-1">网关ID</label>
                            <div class="d-flex align-items-center gap-2">
                                <div class="fw-bold text-break" id="gatewayId"></div>
                                <button class="btn btn-sm btn-light" onclick="copyGatewayId()" title="复制ID">
                                    <i class="bi bi-clipboard"></i>
                                </button>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label text-muted small mb-1">访问Token</label>
                            <div class="d-flex align-items-center gap-2">
                                <div class="fw-bold text-break" id="gatewayToken"></div>
                                <button class="btn btn-sm btn-light" onclick="copyGatewayToken()" title="复制访问Token">
                                    <i class="bi bi-clipboard"></i>
                                </button>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label text-muted small mb-1">监听端口</label>
                            <div class="fw-bold" id="gatewayPort"></div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label text-muted small mb-1">当前版本</label>
                            <div class="d-flex align-items-center gap-2">
                                <div class="fw-bold" id="gatewayVersion"></div>
                                <button id="upgradeBtn" class="btn btn-sm btn-outline-primary" onclick="upgradeGateway()">
                                    <i class="bi bi-arrow-repeat"></i> 检查更新
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 代理服务配置 -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0">代理服务配置</h5>
            </div>
            <div class="card-body">
                <form id="proxyConfigForm">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">agent透明代理Route</label>
                            <input type="text" class="form-control" id="proxyRoute" placeholder="例如: 192.168.1.0/24 (留空表示所有流量)">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">agent透明代理DNS</label>
                            <input type="text" class="form-control" id="proxyDns" placeholder="例如: 8.8.8.8 (留空使用系统默认DNS)">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">上游Socks5代理地址</label>
                            <input type="text" class="form-control" id="proxyAddr" placeholder="例如: 127.0.0.1:1080 (留空表示直连)">
                        </div>
                        <div class="col-md-3 mb-3">
                            <label class="form-label">代理用户名</label>
                            <input type="text" class="form-control" id="proxyUser" placeholder="代理认证用户名 (如不需要可留空)">
                        </div>
                        <div class="col-md-3 mb-3">
                            <label class="form-label">代理密码</label>
                            <input type="password" class="form-control" id="proxyPass" placeholder="代理认证密码 (如不需要可留空)">
                        </div>
                    </div>
                    <div class="text-end">
                        <button type="button" class="btn btn-primary" onclick="saveProxyConfig()">保存配置</button>
                    </div>
                </form>
            </div>
        </div>

        <!-- 透明代理出口列表 -->
        <div class="card mb-4">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">透明代理出口列表</h5>
                <button class="btn btn-primary" onclick="showAddProxyClientModal()">
                    <i class="bi bi-plus-lg"></i> 添加出口
                </button>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>备注</th>
                                <th>目标网段</th>
                                <th>出口网关</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody id="proxyClientList">
                            <script id="proxyClientRowTemplate" type="text/template">
                                <tr>
                                    <td>{{remark}}</td>
                                    <td>{{route}}</td>
                                    <td>{{peer_name}}</td>
                                    <td>
                                        <span class="badge bg-{{open ? 'success' : 'secondary'}}">
                                            {{open ? '启用' : '停用'}}
                                        </span>
                                    </td>
                                    <td>
                                        <button class="btn btn-sm btn-outline-{{open ? 'danger' : 'success'}}" onclick="toggleProxyClientStatus('{{id}}', {{!open}})">
                                            <i class="bi bi-{{open ? 'pause' : 'play'}}"></i>
                                        </button>
                                        <button class="btn btn-sm btn-outline-primary ms-1" onclick="editProxyClient('{{id}}')">
                                            <i class="bi bi-pencil"></i>
                                        </button>
                                        <button class="btn btn-sm btn-outline-danger ms-1" onclick="deleteProxyClient('{{id}}')">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </td>
                                </tr>
                            </script>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- 端口映射资源列表 -->
        <div class="card mb-4">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">端口映射资源列表</h5>
                <button class="btn btn-primary" onclick="showAddModal()">
                    <i class="bi bi-plus-lg"></i> 添加资源
                </button>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>名称</th>
                                <th>网络</th>
                                <th>目标地址</th>
                                <th>目标端口</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody id="resourceList">
                            <script id="resourceRowTemplate" type="text/template">
                                <tr>
                                    <td class="d-flex align-items-center gap-1">
                                        <span>{{id}}</span>
                                        <button class="btn btn-sm btn-light" onclick="copyToClipboard('{{id}}')" title="复制ID">
                                            <i class="bi bi-clipboard"></i>
                                        </button>
                                    </td>
                                    <td>{{name}}</td>
                                    <td>{{network}}</td>
                                    <td>{{targetAddr}}</td>
                                    <td>{{targetPort}}</td>
                                    <td>
                                        <button class="btn btn-sm btn-outline-primary" onclick="editResource('{{id}}')">
                                            <i class="bi bi-pencil"></i>
                                        </button>
                                        <button class="btn btn-sm btn-outline-danger ms-1" onclick="deleteResource('{{id}}')">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </td>
                                </tr>
                            </script>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- 端口映射应用列表 -->
        <div class="card mb-4">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">端口映射应用列表</h5>
                <button class="btn btn-primary" onclick="showAddPortmapModal()">
                    <i class="bi bi-plus-lg"></i> 添加应用
                </button>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>名称</th>
                                <th>节点名称</th>
                                <th>网络</th>
                                <th>本地IP</th>
                                <th>本地端口</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody id="portmapList">
                            <script id="portmapRowTemplate" type="text/template">
                                <tr>
                                    <td>{{name}}</td>
                                    <td>{{peer_name}}</td>
                                    <td>{{network}}</td>
                                    <td>{{local_ip}}</td>
                                    <td>{{local_port}}</td>
                                    <td>
                                        <span class="badge bg-{{running ? 'success' : 'secondary'}}">
                                            {{running ? '运行中' : '已停止'}}
                                        </span>
                                    </td>
                                    <td>
                                        <button class="btn btn-sm btn-outline-primary" onclick="editPortmap('{{id}}')">
                                            <i class="bi bi-pencil"></i>
                                        </button>
                                        <button class="btn btn-sm btn-outline-danger ms-1" onclick="deletePortmap('{{id}}')">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </td>
                                </tr>
                            </script>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- 复制成功提示 -->
    <div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
        <div id="copyToast" class="toast align-items-center text-white bg-success" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="d-flex">
                <div class="toast-body">
                    <i class="bi bi-check-circle me-2"></i>已复制到剪贴板
                </div>
                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
        </div>
    </div>

    <!-- 修改网关名称模态框 -->
    <div class="modal fade" id="gatewayNameModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">修改网关名称</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="gatewayNameForm">
                        <div class="mb-3">
                            <label class="form-label">网关名称</label>
                            <input type="text" class="form-control" id="newGatewayName" required>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="updateGatewayName()">保存</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 添加/编辑资源模态框 -->
    <div class="modal fade" id="resourceModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalTitle">添加资源</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="resourceForm">
                        <input type="hidden" id="resourceId">
                        <div class="mb-3">
                            <label class="form-label">名称</label>
                            <input type="text" class="form-control" id="name" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">网络</label>
                            <select class="form-select" id="network" required>
                                <option value="tcp">TCP</option>
                                <option value="udp">UDP</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">目标地址</label>
                            <input type="text" class="form-control" id="targetAddr" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">目标端口</label>
                            <input type="number" class="form-control" id="targetPort" min="1" max="65535" required>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="saveResource()">保存</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 添加/编辑端口映射应用模态框 -->
    <div class="modal fade" id="portmapModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="portmapModalTitle">添加端口映射应用</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="portmapForm">
                        <input type="hidden" id="portmapId">
                        <div class="mb-3">
                            <label class="form-label">应用名称</label>
                            <input type="text" class="form-control" id="portmapName" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Peer ID</label>
                            <input type="text" class="form-control" id="PortmapPeerId" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">资源ID</label>
                            <input type="number" class="form-control" id="resId" min="1" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">网络类型</label>
                            <select class="form-select" id="portmapNetwork" required>
                                <option value="tcp">TCP</option>
                                <option value="udp">UDP</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">本地IP</label>
                            <input type="text" class="form-control" id="localIp" value="0.0.0.0" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">本地端口</label>
                            <input type="number" class="form-control" id="localPort" min="1" max="65535" required>
                        </div>
                        <div class="mb-3 form-check">
                            <input type="checkbox" class="form-check-input" id="running">
                            <label class="form-check-label" for="running">立即运行</label>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="savePortmap()">保存</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 添加/编辑代理出口模态框 -->
    <div class="modal fade" id="proxyClientModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="proxyClientModalTitle">添加代理出口</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="proxyClientForm">
                        <input type="hidden" id="proxyClientId">
                        <div class="mb-3">
                            <label class="form-label">备注</label>
                            <input type="text" class="form-control" id="remark" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">目标网段</label>
                            <input type="text" class="form-control" id="route" placeholder="例如: 192.168.1.0/24" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Peer ID</label>
                            <input type="text" class="form-control" id="proxyClientPeerId" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Token</label>
                            <input type="text" class="form-control" id="clientToken" required>
                        </div>
                        <div class="mb-3 form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="open" checked>
                            <label class="form-check-label" for="open">启用代理</label>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="saveProxyClient()">保存</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="js/app.js"></script>
</body>
</html> 